<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 350px;
      height: 350px;
      border: 1px solid #ccc;
      position: relative
    }

    .big {
      width: 400px;
      height: 400px;
      position: absolute;
      top: 0;
      left: 360px;
      border: 1px solid #ccc;
      overflow: hidden;
      display: none
    }

    .mask {
      width: 175px;
      height: 175px;
      background: rgba(255, 255, 0, .4);
      position: absolute;
      top: 0;
      left: 0;
      cursor: move;
      display: none
    }

    .small {
      position: relative
    }

    .box img {
      vertical-align: top
    }

    #bigBox img {
      position: absolute
    }
  </style>
</head>

<body>
  <div class="box" id="box">
    <div id="smallBox" class="small">
      <img src="../img/small.jpg">
      <div id="mask" class="mask"></div>
    </div>
    <div id="bigBox" class="big">
      <img id="bigImg" src="../img/big.jpg">
    </div>
  </div>
  <script>
    // 需求：鼠标经过盒子 显示遮罩和大图 鼠标移动的时候 让遮罩跟着移动让大图按照比例移动
    function $(id) {    // 根据id值获取元素对象
      return document.getElementById(id);
    }
    // 鼠标经过盒子 显示遮罩和大图 
    $('smallBox').onmouseover = function () {
      $('mask').style.display = 'block';
      $('bigBox').style.display = 'block';
    };
    // 鼠标离开盒子 隐藏遮罩和大图
    $('smallBox').onmouseout = function () {
      //隐藏遮罩和大图
      $('mask').style.display = 'none';
      $('bigBox').style.display = 'none';
    };
    //  鼠标在盒子上移动的时候
    //  让遮罩跟着鼠标移动
    $('smallBox').onmousemove = function (event) {
      var event = event || window.event;
      //鼠标在页面中的坐标
      var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
      var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
      //  计算鼠标的位置 距 盒子 的距离
      var boxX = pageX - $('box').offsetLeft;
      var boxY = pageY - $('box').offsetTop;
      // 计算遮罩的位置
      var maskX = boxX - $('mask').offsetWidth / 2;
      var maskY = boxY - $('mask').offsetHeight / 2;
      // 限定遮罩可移动范围
      if (maskX < 0) {
        maskX = 0;
      }
      if (maskX > $('smallBox').offsetWidth - $('mask').offsetWidth) {
        maskX = $('smallBox').offsetWidth - $('mask').offsetWidth;
      }
      if (maskY < 0) {
        maskY = 0;
      }
      if (maskY > $('smallBox').offsetHeight - $('mask').offsetHeight) {
        maskY = $('smallBox').offsetHeight - $('mask').offsetHeight;
      }
      //  修改遮罩的显示位置
      $('mask').style.left = maskX + 'px';
      $('mask').style.top = maskY + 'px';
      // 按照比例移动大图 大图片能够移动的总距离 = 大图的宽度 - 大盒子的宽度
      var bigImgToMove = $('bigImg').offsetWidth - $('bigBox').offsetWidth;
      // 遮罩能够移动的总距离 = 小盒子的宽度 - 遮罩的宽度
      var maskToMove = $('smallBox').offsetWidth - $('mask').offsetWidth;
      // 计算移动比例rate = 大图片能够移动的总距离/遮罩能够移动的总距离
      var rate = bigImgToMove / maskToMove;
      // 设置大图片当前的位置 = rate * 遮罩当前的位置
      $('bigImg').style.left = - rate * maskX + 'px';
      $('bigImg').style.top = - rate * maskY + 'px';
    };
  </script>
</body>

</html>